<template>
  <!---------------------- 用于各种记录列表 ----------------------
* @auto kyle
* @date 2020-7-28
* @props 对外属性（接收数据）
*  list     传入的列表数据
*  type     列表类型
            withdraw      -- 提现
            transfer      -- 转账
            cash          -- 收银
            pay           -- 支付
            member        -- 会员管理列表
            memberCash    -- 会员收银记录
*  imgSize  头像框大小
            60 -- 头像框为60的列表
            74 -- 头像框为74的列表
            90 -- 头像框为90的列表
*  total    会员收银
  -->
  <van-cell-group :class="contentBox">
    <van-cell v-if="type==='memberCash'" title="收银记录" value="内容" class="list-head" center>
      <template #default>
        <p class="fs-36 fw-500 color-dark lh-sm">{{ total.TotalSale }}</p>
        <p class="color-gray-light fs-24 lh-xxs">收款笔数：{{ total.OrderCount }}</p>
      </template>
    </van-cell>
    <van-cell
      v-for="(item,index) in dataList"
      :key="index"
      :label="item.PayTime"
      center
      :type="type"
      :is-link="type==='member'"
      @click="openDetail(item.Id)"
    >
      <template #title>
        <div v-if="type==='withdraw'||type==='memberCash'" :class="imgBox">
          <SvgIcon v-if="item.PayWay===4" icon-class="wechatpay" :class="icon" />
          <SvgIcon v-if="item.PayWay===5" icon-class="alipay" :class="icon" />
          <SvgIcon v-if="item.PayWay===1" icon-class="balance" :class="icon" />
          <SvgIcon v-if="item.PayWay===8" icon-class="unionpay" :class="icon" />
        </div>
        <headPortrait-box
          v-if="type==='member'||type==='cash'||type==='transfer'"
          :class="imgBox"
          :head-portrait-url="item.HeadPortrait||''"
        />
        <headPortrait-box v-if="type==='pay'" :class="imgBox" :head-portrait-url="item.StoreLogo||''" />
        <span
          v-if="type==='cash'||type==='member'"
          class="color-black fs-26 dis-inb"
        >{{ item.RealName }}</span>
        <span v-if="type==='pay'" class="color-black fs-26 dis-inb">{{ item.StoreName }}</span>
        <span v-if="type==='memberCash'" class="color-black fs-26 dis-inb">{{ item.PayWayName }}</span>
      </template>

      <!-- 会员 -->
      <template v-if="type === 'member'" #label>
        <!-- <p class="dis-inb grade-box pos-r plr-20 fs-24" :class="gradeClass">
          <img :src="gradeImg" />
          <span>{{item.GradeName}}</span>
        </p>-->
        <level-box :grade-info="item.gradeInfo" />
      </template>

      <template>
        <!-- 收银 -->
        <span
          v-if="type === 'cash'&& item.PayWay === 4"
          class="fs-32 color-success"
        >+{{ item.PriceSum }}</span>
        <span
          v-if="type === 'cash'&& item.PayWay === 5"
          class="fs-32 color-blue"
        >+{{ item.PriceSum }}</span>
        <span
          v-if="type === 'cash'&& item.PayWay === 1"
          class="fs-32 color-warning"
        >+{{ item.PriceSum }}</span>
        <span
          v-if="type === 'cash'&& item.PayWay === 8"
          class="fs-32 color-unionpay"
        >+{{ item.PriceSum }}</span>

        <!-- 支付 -->
        <span v-if="type === 'pay'" class="fs-32 color-dark">-{{ item.PayMoney }}</span>
        <!-- 会员收银 -->
        <span v-if="type === 'memberCash'" class="fs-32 color-dark">+{{ item.PayMoney }}</span>

        <!-- 提现 -->
        <div v-if="type === 'withdraw'">
          <div class="flex flex-d-c color-dark">
            <span class="fs-32">+{{ item.PayMoney }}</span>
            <span v-if="item.state===0" class="fs-24">提现成功</span>
            <span v-if="item.state===1" class="fs-24 color-warning">待审核</span>
            <span v-if="item.state===2" class="fs-24 color-success">审核中</span>
            <span v-if="item.state===3" class="fs-24 color-danger">已驳回</span>
          </div>
        </div>
        <!-- 转账 -->
        <div v-if="type === 'transfer'">
          <div class="flex flex-d-c color-dark">
            <span class="fs-32">{{ item.PayMoney }}</span>
            <span class="fs-24">{{ item.state }}</span>
          </div>
        </div>
      </template>
    </van-cell>
  </van-cell-group>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import headPortraitBox from 'components/headPortraitBox'
import levelBox from 'components/levelBox'
export default {
  name: 'RecordList',
  components: {
    SvgIcon,
    headPortraitBox,
    levelBox
  },
  props: {
    total: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    list: {
      type: Array,
      required: true,
      default: function() {
        return []
      }
    },
    type: {
      type: String,
      required: true,
      default: ''
    },
    imgSize: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      gradeImg: require('assets/images/grade8.png'),
      gradeClass: 'grade-8'
    }
  },
  computed: {
    dataList() {
      const Arr = this.list
      if (Arr.length) {
        Arr.forEach(tem => {
          if (tem.GradeName) {
            const gradeInfo = { GradeName: tem.GradeName, GradeLevel: tem.GradeLevel }
            tem.gradeInfo = gradeInfo
          }
        })
      }
      return Arr
    },
    contentBox() {
      if (this.imgSize) {
        return 'br-18 mt-20 list-cell-group-' + this.imgSize
      } else {
        return 'br-18 mt-20 '
      }
    },
    imgBox() {
      if (this.imgSize) {
        return 'profile-box br-full pos-a is-' + this.imgSize
      } else {
        return 'profile-box br-full pos-a'
      }
    },
    icon() {
      if (this.imgSize) {
        return 'pos-a color-primary fs-' + this.imgSize
      } else {
        return 'pos-a color-primary'
      }
    }
  },
  methods: {
    openDetail(val) {
      this.$emit('openDetail', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.grade-box {
  // width: 100px;
  height: 46px;
  line-height: 46px;
  border-radius: 23px;
  img {
    width: 48px;
    height: 48px;
  }
}

/* 头像为90的列表页 */
.list-cell-group-90 {
  overflow: hidden;
  .van-cell {
    padding-left: 70px;
    &:after {
      left: 70px;
    }
    .van-cell__title {
      position: relative;
      .profile-box {
        left: -55px;
        top: 6px;
      }
    }
  }
}
/* 头像为74的列表页 */
.list-cell-group-74 {
  overflow: hidden;
  .van-cell {
    padding-left: 55px;
    &:after {
      left: 55px;
    }
    .van-cell__title {
      position: relative;
      .profile-box {
        left: -42px;
        top: 4px;
      }
    }
  }
}
/* 头像为60的列表页 */
.list-cell-group-60 {
  overflow: hidden;
  .van-cell {
    padding-left: 53px;
    &:after {
      left: 53px;
    }
    .van-cell__title {
      position: relative;
      .profile-box {
        left: -40px;
        top: 8px;
      }
    }
  }
  .list-head {
    padding-left: 32px;
    &:after {
      left: 0;
    }
  }
}
</style>
